<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>小球跳动加载动画</title>
		<style type="text/css">
			@-webkit-keyframes ball-top {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  25% {
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform: rotate(-13deg);
    transform: rotate(-13deg);
  }
  75% {
    -webkit-transform: rotate(193deg);
    -moz-transform: rotate(193deg);
    -ms-transform: rotate(193deg);
    -o-transform: rotate(193deg);
    transform: rotate(193deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-moz-keyframes ball-top {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  25% {
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform: rotate(-13deg);
    transform: rotate(-13deg);
  }
  75% {
    -webkit-transform: rotate(193deg);
    -moz-transform: rotate(193deg);
    -ms-transform: rotate(193deg);
    -o-transform: rotate(193deg);
    transform: rotate(193deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-o-keyframes ball-top {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  25% {
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform: rotate(-13deg);
    transform: rotate(-13deg);
  }
  75% {
    -webkit-transform: rotate(193deg);
    -moz-transform: rotate(193deg);
    -ms-transform: rotate(193deg);
    -o-transform: rotate(193deg);
    transform: rotate(193deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@keyframes ball-top {
  0% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  25% {
    -webkit-transform: rotate(-13deg);
    -moz-transform: rotate(-13deg);
    -ms-transform: rotate(-13deg);
    -o-transform: rotate(-13deg);
    transform: rotate(-13deg);
  }
  75% {
    -webkit-transform: rotate(193deg);
    -moz-transform: rotate(193deg);
    -ms-transform: rotate(193deg);
    -o-transform: rotate(193deg);
    transform: rotate(193deg);
  }
  100% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@-webkit-keyframes ball-bot {
  0% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  25% {
    -webkit-transform: rotate(345deg);
    -moz-transform: rotate(345deg);
    -ms-transform: rotate(345deg);
    -o-transform: rotate(345deg);
    transform: rotate(345deg);
  }
  75% {
    -webkit-transform: rotate(195deg);
    -moz-transform: rotate(195deg);
    -ms-transform: rotate(195deg);
    -o-transform: rotate(195deg);
    transform: rotate(195deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-moz-keyframes ball-bot {
  0% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  25% {
    -webkit-transform: rotate(345deg);
    -moz-transform: rotate(345deg);
    -ms-transform: rotate(345deg);
    -o-transform: rotate(345deg);
    transform: rotate(345deg);
  }
  75% {
    -webkit-transform: rotate(195deg);
    -moz-transform: rotate(195deg);
    -ms-transform: rotate(195deg);
    -o-transform: rotate(195deg);
    transform: rotate(195deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-o-keyframes ball-bot {
  0% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  25% {
    -webkit-transform: rotate(345deg);
    -moz-transform: rotate(345deg);
    -ms-transform: rotate(345deg);
    -o-transform: rotate(345deg);
    transform: rotate(345deg);
  }
  75% {
    -webkit-transform: rotate(195deg);
    -moz-transform: rotate(195deg);
    -ms-transform: rotate(195deg);
    -o-transform: rotate(195deg);
    transform: rotate(195deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@keyframes ball-bot {
  0% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  25% {
    -webkit-transform: rotate(345deg);
    -moz-transform: rotate(345deg);
    -ms-transform: rotate(345deg);
    -o-transform: rotate(345deg);
    transform: rotate(345deg);
  }
  75% {
    -webkit-transform: rotate(195deg);
    -moz-transform: rotate(195deg);
    -ms-transform: rotate(195deg);
    -o-transform: rotate(195deg);
    transform: rotate(195deg);
  }
  100% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}
@-webkit-keyframes circle-effect-left {
  0% {
    opacity: 0;
  }
  24.99% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  40% {
    border-color: rgba(255, 255, 255, 0);
  }
  45% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes circle-effect-left {
  0% {
    opacity: 0;
  }
  24.99% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  40% {
    border-color: rgba(255, 255, 255, 0);
  }
  45% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes circle-effect-left {
  0% {
    opacity: 0;
  }
  24.99% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  40% {
    border-color: rgba(255, 255, 255, 0);
  }
  45% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes circle-effect-left {
  0% {
    opacity: 0;
  }
  24.99% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  40% {
    border-color: rgba(255, 255, 255, 0);
  }
  45% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes circle-effect-right {
  0% {
    opacity: 0;
  }
  74.99% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  90% {
    border-color: rgba(255, 255, 255, 0);
  }
  95% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes circle-effect-right {
  0% {
    opacity: 0;
  }
  74.99% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  90% {
    border-color: rgba(255, 255, 255, 0);
  }
  95% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes circle-effect-right {
  0% {
    opacity: 0;
  }
  74.99% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  90% {
    border-color: rgba(255, 255, 255, 0);
  }
  95% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
@keyframes circle-effect-right {
  0% {
    opacity: 0;
  }
  74.99% {
    opacity: 0;
  }
  75% {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.6);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
  }
  90% {
    border-color: rgba(255, 255, 255, 0);
  }
  95% {
    opacity: 0;
    border-color: rgba(255, 255, 255, 0);
    -webkit-transform: scale(3, 1);
    -moz-transform: scale(3, 1);
    -ms-transform: scale(3, 1);
    -o-transform: scale(3, 1);
    transform: scale(3, 1);
  }
  100% {
    opacity: 0;
  }
}
.wrap-preload {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
  opacity: 1;
  visibility: visible;
  background: rgba(255, 255, 255, 0.6);
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.wrap-preload.circle-ball {
  background: rgba(0, 0, 0, 0.8);
}
.wrap-preload.circle-ball .wrap-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 128px;
  height: 128px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball {
  position: relative;
  width: 100%;
  height: 100%;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .ball {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  border-radius: 100%;
  width: 16px;
  height: 16px;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .ball.ball-top {
  z-index: 1;
  background: #009D2F;
  -webkit-transform-origin: 64px 50%;
  -moz-transform-origin: 64px 50%;
  -ms-transform-origin: 64px 50%;
  -o-transform-origin: 64px 50%;
  transform-origin: 64px 50%;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation: ball-top 3s linear 0s infinite;
  -moz-animation: ball-top 3s linear 0s infinite;
  -ms-animation: ball-top 3s linear 0s infinite;
  -o-animation: ball-top 3s linear 0s infinite;
  animation: ball-top 3s linear 0s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .ball.ball-top:nth-of-type(2) {
  background: #17B948;
  width: 8px;
  height: 8px;
  -webkit-animation: ball-top 3s linear 0.6s infinite;
  -moz-animation: ball-top 3s linear 0.6s infinite;
  -ms-animation: ball-top 3s linear 0.6s infinite;
  -o-animation: ball-top 3s linear 0.6s infinite;
  animation: ball-top 3s linear 0.6s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .ball.ball-bot {
  opacity: 0.4;
  background: #F7AB03;
  -webkit-transform-origin: 64px 50%;
  -moz-transform-origin: 64px 50%;
  -ms-transform-origin: 64px 50%;
  -o-transform-origin: 64px 50%;
  transform-origin: 64px 50%;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation: ball-bot 3s linear 0s infinite;
  -moz-animation: ball-bot 3s linear 0s infinite;
  -ms-animation: ball-bot 3s linear 0s infinite;
  -o-animation: ball-bot 3s linear 0s infinite;
  animation: ball-bot 3s linear 0s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .ball.ball-bot:nth-of-type(2) {
  background: #FFC239;
  width: 8px;
  height: 8px;
  -webkit-animation: ball-bot 3s linear 0.6s infinite;
  -moz-animation: ball-bot 3s linear 0.6s infinite;
  -ms-animation: ball-bot 3s linear 0.6s infinite;
  -o-animation: ball-bot 3s linear 0.6s infinite;
  animation: ball-bot 3s linear 0.6s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect {
  position: absolute;
  top: 50%;
  margin-top: -8px;
  left: -8px;
  right: -8px;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect {
  opacity: 0;
  position: absolute;
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  width: 32px;
  height: 32px;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect:nth-of-type(2):before {
  border: none;
  background: rgba(255, 255, 255, 0.2);
  width: 8px;
  height: 8px;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 16px;
  height: 16px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect.left {
  left: 0;
  -webkit-animation: circle-effect-left 3s linear 0s infinite;
  -moz-animation: circle-effect-left 3s linear 0s infinite;
  -ms-animation: circle-effect-left 3s linear 0s infinite;
  -o-animation: circle-effect-left 3s linear 0s infinite;
  animation: circle-effect-left 3s linear 0s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect.left:nth-of-type(2) {
  top: 8px;
  left: 4px;
  width: 16px;
  height: 16px;
  -webkit-animation: circle-effect-left 3s linear 0.6s infinite;
  -moz-animation: circle-effect-left 3s linear 0.6s infinite;
  -ms-animation: circle-effect-left 3s linear 0.6s infinite;
  -o-animation: circle-effect-left 3s linear 0.6s infinite;
  animation: circle-effect-left 3s linear 0.6s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect.right {
  right: 0;
  -webkit-animation: circle-effect-right 3s linear 0s infinite;
  -moz-animation: circle-effect-right 3s linear 0s infinite;
  -ms-animation: circle-effect-right 3s linear 0s infinite;
  -o-animation: circle-effect-right 3s linear 0s infinite;
  animation: circle-effect-right 3s linear 0s infinite;
}
.wrap-preload.circle-ball .wrap-content .wrap-circle-ball .wrap-effect .circle-effect.right:nth-of-type(2) {
  top: 8px;
  right: 4px;
  width: 16px;
  height: 16px;
  -webkit-animation: circle-effect-right 3s linear 0.6s infinite;
  -moz-animation: circle-effect-right 3s linear 0.6s infinite;
  -ms-animation: circle-effect-right 3s linear 0.6s infinite;
  -o-animation: circle-effect-right 3s linear 0.6s infinite;
  animation: circle-effect-right 3s linear 0.6s infinite;
}
.wrap-preload.hide-out {
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
.wrap-preload .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: none;
  width: 100%;
  height: 100%;
}

		</style>
	</head>
	<body>
		<div class="wrap-preload circle-ball">
  <div class="overlay"></div>
  <div class="wrap-content">
    <div class="wrap-circle-ball">
      <div class="wrap-ball">
        <div class="ball ball-top"></div>
        <div class="ball ball-top"></div>
      </div>
      <div class="wrap-ball">
        <div class="ball ball-bot"></div>
        <div class="ball ball-bot"></div>
      </div>
      <div class="wrap-effect">
        <div class="wrap-circle">
          <div class="circle-effect left"></div>
          <div class="circle-effect left"></div>
        </div>
        <div class="wrap-circle">
          <div class="circle-effect right"></div>
          <div class="circle-effect right"></div>
        </div>
      </div>
    </div>
  </div>
</div>
	</body>
</html>
